<template>
  <div>
    <h1>$nextTick</h1>
    <h2 ref="abc">{{ count }}</h2>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
/**
 * 如何获取更新后的dom的内容
 * 需求 - 获取h2元素里面的内容
 *  0. 点击事件count还要累加
 *  1. 在标签上加ref属性 ref='abc'
 *  2. 恰当的时机 this.$refs.abc获取
 */
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      // this.count++;
      /**
       * 假设是同步的 没做一次操作就会重新渲染视图
       *
       * 以下代码最后一次把count赋值成999
       * 那最终的视图应该就是999
       * 那你当中的过程 如果是同步的，是不是就影响性能了
       *
       * dom更新机制改成异步的 性能优化 - 攒一攒 最后在执行 一次更新
       */
      // this.count = 100;
      // this.count = 9;
      this.count++;
      // this.count--;
      // this.count *= 2;
      // this.count /= 3;
      // this.count = 999;

      const h2Ele = this.$refs.abc;
      /**
       * 每次打印的数据 都是上一次的视图 标签内的内容 原因是
       *
       * 视频重点 dom的更新是异步的
       * 视频重点 dom的更新是异步的
       * 视频重点 dom的更新是异步的
       *
       * 如果是同步的 count++ 数字就加1了
       * 视图此时应该也是同步+1
       *
       * 测试下来并非如此 说明dom更新(vue机制)是异步更新 为什么这么做
       */

      // setTimeout尝试解决下 延时器
      console.log(h2Ele.innerHTML);
      /**
       * 宏任务 dom更新
       * 有微任务 执行微任务 执行宏任务 => Dom会更新
       * 再执行下次循环
       * 微任务 宏任务 dom更新
       * 微任务 宏任务 dom更新
       */
      // 之前的dom已经更新好了，所以能获取最新的dom
      // setTimeout(() => {
      //   console.log(this, h2Ele.innerHTML);
      // }, 0);
      /**
       * 官方推荐 this.$nextTick是个函数
       * 用来干嘛 ？ 处理拿到更新后的dom
       * 怎么用 ？ 参数回调函数 在回调函数中处理dom更新后的逻辑
       * 回调函数中 - dom已经更新好了
       *
       */
      this.$nextTick(() => {
        // 代表dom已经更新好了
        console.log(h2Ele.innerHTML);
      });
    },
  },
};
</script>

<style>
</style>
